---
# title: "Resize"
title: "大小调整"
# description: "Utilities for controlling how an element can be resized."
description: "用于控制一个元素如何调整大小的功能"
---

import plugin from 'tailwindcss/lib/plugins/resize'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

<!-- ## Resize in all directions -->
## 在所有方向调整大小

<!-- Use `resize` to make an element horizontally and vertically resizable. -->
使用 `resize` 使一个元素在水平和垂直方向上可调整大小。

```html purple
<template preview>
  <textarea class="resize border rounded-md"></textarea>
</template>
```

<!-- ## Resize vertically -->
## 在垂直方向调整大小

<!-- Use `resize-y` to make an element vertically resizable. -->
使用 `resize-y` 使一个元素可以在垂直方向调整大小。

```html emerald
<template preview>
  <textarea class="resize-y border rounded-md"></textarea>
</template>
```

<!-- ## Resize horizontally -->
## 在水平方向调整大小

<!-- Use `resize-x` to make an element horizontally resizable. -->
使用 `resize-x` 使一个元素可以在水平方向调整大小。

```html amber
<template preview>
  <textarea class="resize-x border rounded-md"></textarea>
</template>
```

<!-- ## Prevent resizing -->
## 防止大小调整

<!-- Use `resize-none` to prevent an element from being resizable. -->
使用 `resize-none` 来防止元素被调整大小。

```html lightBlue
<template preview>
  <textarea class="resize-none border rounded-md"></textarea>
</template>
```

<!-- ## Customizing -->
## 自定义

<!-- ### Variants -->
### 变体

<Variants plugin="resize" name="resizing" />

<!-- ### Disabling -->
### 禁用

<Disabling plugin="resize" name="resizing" />
